<template>
  <div>
    <pro-table
      ref="tableRef"
      :data="tableData"
      :total="0"
      :columns="columns"
      :tool-button="false"
      @search="commEvent.onSearch"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <!-- 顶部操作栏 -->
      <template #tableHeader>
        <el-row justify="end">
          <el-button type="primary" icon="Plus" @click="commEvent.onAdd()" v-auth="['sys:dept:save']">新增</el-button>
        </el-row>
      </template>
      <!-- 操作 -->
      <template #operation="{ row }">
        <el-button type="primary" link @click="commEvent.onAdd(row)" v-auth="['sys:dept:save']">新增</el-button>
        <el-button type="primary" link @click="commEvent.onEdit(row)" v-auth="['sys:dept:save']">编辑</el-button>
        <el-button type="danger" link @click="commEvent.onDelete(row)" v-auth="['sys:dept:remove']">删除</el-button>
      </template>
    </pro-table>
    <!-- 新增/编辑部门 -->
    <save-dept v-model="saveVisible" :pid="parentId" :row="currents" :tree-data="tableData" @refresh="commEvent.onSearch" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import ProTable from "@/components/ProTable/index.vue"
import SaveDept from "./components/SaveDept.vue"
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"
import { statusOptions } from "@/utils/dict"
import { getDeptTreeApi, deptTreeDeleteApi } from "@/api/modules/system"
import { SystemSpace } from "@/api/interface/system"
import { ElMessage, ElMessageBox } from "element-plus"
// 参数
const tableRef = ref<ProTableInstance>() // 表格实例
const tableData = ref<SystemSpace.DeptTree[]>([]) // 表格数据.
const saveVisible = ref<boolean>(false) // 弹窗显示
const currents = ref<SystemSpace.DeptTree>() // 当前操作数据
const parentId = ref<number>(0) // 父级id
// 表格列配置
const columns: ColumnProps<SystemSpace.DeptTree>[] = [
  { prop: "name", label: "部门名称", width: 220, search: { el: "input" }, align: "left" },
  { prop: "sort", label: "排序", width: 120 },
  { prop: "status", label: "部门状态", enum: statusOptions, width: 120, search: { el: "select" } },
  { prop: "leader", label: "部门领导", search: { el: "input" } },
  { prop: "phone", label: "联系方式", search: { el: "input" } },
  { prop: "email", label: "邮箱地址", width: 220 },
  { prop: "operation", label: "操作", width: 160, fixed: "right" }
]
// 事件集合
const commEvent = {
  // 获取表格数据
  getTableData: async (params: SystemSpace.DeptTreeQuery) => {
    const { data } = await getDeptTreeApi(params)
    tableData.value = data
  },
  // 查询
  onSearch: () => {
    tableRef.value?.search()
    const _search = tableRef.value?.searchParam
    commEvent.getTableData({ ..._search })
  },
  onAdd: (row?: SystemSpace.DeptTree) => {
    currents.value = undefined
    if (row) {
      parentId.value = row.id
    } else {
      parentId.value = 0
    }
    saveVisible.value = true
  },
  onEdit: (row: SystemSpace.DeptTree) => {
    currents.value = row
    parentId.value = row.pid
    saveVisible.value = true
  },
  onDelete: (row: SystemSpace.DeptTree) => {
    ElMessageBox.confirm("确定删除此部门?", "删除", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        deptTreeDeleteApi({ id: row.id }).then(() => {
          ElMessage.success("删除成功")
          commEvent.onSearch()
        })
      })
      .catch(() => {})
  }
}
onMounted(() => {
  commEvent.getTableData({})
})
</script>

<style lang="scss" scoped></style>
